@import '~@wordpress/base-styles/breakpoints';
@import '~@wordpress/base-styles/mixins';

.jetpack-free-card {
	box-sizing: border-box;

	background: var( --color-surface );

	border: 1px solid var( --color-border-subtle );
	@media ( max-width: 660px ) {
		border-left: none;
		border-right: none;
	}

	margin-bottom: 24px;
}

.jetpack-free-card__header {
	padding: 24px 16px;
	border-bottom: solid 1px var( --color-border-subtle );

	h3 {
		font-size: $font-title-medium;
		font-weight: 600;
		line-height: rem( 30px ) / $font-title-medium;
	}
}

.jetpack-free-card__body {
	padding: 24px 16px;

	@include break-medium {
		display: flex;
		align-items: flex-start;
	}

	p {
		margin-bottom: 0;

		@include break-medium {
			width: 50%;
			margin-right: 24px;
		}
	}
}

.jetpack-free-card__button {
	display: block;

	margin-top: 24px;

	@include break-medium {
		flex: 1;

		margin-top: 0;
	}
}
